<script lang="ts" setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';

const items = ref([
  {
    id: '1',
    name: '宠物医院',
    level: 1,
    children: [
      {
        id: '1.1',
        name: '智能订货系统',
        level: 2,
        children: [{ id: '1.1.1', name: '餐饮预定管理', level: 3 }],
      },
      {
        id: '1.2',
        name: '服务管理',
        level: 2,
        children: [{ id: '1.2.1', name: '自动派单', level: 3 }],
      },
    ],
  },
  { id: '2', name: '流程表单', level: 1 },
]);

const draggedItem = ref(null);
const dropTarget = ref(null);

const handleDragStart = (e: DragEvent, item: any) => {
  draggedItem.value = item;
  e.dataTransfer!.effectAllowed = 'move';
  e.dataTransfer!.setData('text/plain', item.id);
  console.log('开始拖拽:', item.name);
};

const handleDragOver = (e: DragEvent) => {
  e.preventDefault();
  e.dataTransfer!.dropEffect = 'move';
};

const handleDrop = (e: DragEvent, targetItem: any) => {
  e.preventDefault();

  if (draggedItem.value && targetItem) {
    console.log('拖拽到:', draggedItem.value.name, '->', targetItem.name);
    message.success(
      `成功将 ${draggedItem.value.name} 移动到 ${targetItem.name} 下`,
    );
  }

  draggedItem.value = null;
  dropTarget.value = null;
};

const handleDragEnter = (e: DragEvent, item: any) => {
  e.preventDefault();
  dropTarget.value = item;
};

const handleDragLeave = (e: DragEvent) => {
  e.preventDefault();
  dropTarget.value = null;
};

const getDragClass = (item: any) => {
  if (draggedItem.value?.id === item.id) return 'dragging';
  if (dropTarget.value?.id === item.id) return 'drop-target';
  return '';
};
</script>

<template>
  <div class="drag-demo">
    <h2>拖拽演示</h2>
    <p>点击并拖拽资源名称来测试拖拽功能</p>

    <div class="resource-list">
      <div
        v-for="item in items"
        :key="item.id"
        class="resource-item"
        :class="getDragClass(item)"
        :style="{ paddingLeft: item.level * 20 + 'px' }"
      >
        <div
          class="resource-name"
          draggable="true"
          @dragstart="handleDragStart($event, item)"
          @dragover="handleDragOver"
          @drop="handleDrop($event, item)"
          @dragenter="handleDragEnter($event, item)"
          @dragleave="handleDragLeave"
        >
          <span class="drag-handle">...</span>
          <span class="name">{{ item.name }}</span>
          <span class="level">(层级: {{ item.level }})</span>
        </div>

        <div v-if="item.children" class="children">
          <div
            v-for="child in item.children"
            :key="child.id"
            class="resource-item"
            :class="getDragClass(child)"
            :style="{ paddingLeft: child.level * 20 + 'px' }"
          >
            <div
              class="resource-name"
              draggable="true"
              @dragstart="handleDragStart($event, child)"
              @dragover="handleDragOver"
              @drop="handleDrop($event, child)"
              @dragenter="handleDragEnter($event, child)"
              @dragleave="handleDragLeave"
            >
              <span class="drag-handle">...</span>
              <span class="name">{{ child.name }}</span>
              <span class="level">(层级: {{ child.level }})</span>
            </div>

            <div v-if="child.children" class="children">
              <div
                v-for="grandChild in child.children"
                :key="grandChild.id"
                class="resource-item"
                :class="getDragClass(grandChild)"
                :style="{ paddingLeft: grandChild.level * 20 + 'px' }"
              >
                <div
                  class="resource-name"
                  draggable="true"
                  @dragstart="handleDragStart($event, grandChild)"
                  @dragover="handleDragOver"
                  @drop="handleDrop($event, grandChild)"
                  @dragenter="handleDragEnter($event, grandChild)"
                  @dragleave="handleDragLeave"
                >
                  <span class="drag-handle">...</span>
                  <span class="name">{{ grandChild.name }}</span>
                  <span class="level">(层级: {{ grandChild.level }})</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.drag-demo {
  padding: 20px;
}

.resource-list {
  margin-top: 20px;
}

.resource-item {
  margin: 8px 0;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  background: white;
  transition: all 0.2s ease;
}

.resource-item:hover {
  background-color: #f5f5f5;
}

.resource-item.dragging {
  opacity: 0.5;
  background-color: #e6f7ff;
  transform: rotate(2deg);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.resource-item.drop-target {
  background-color: #f6ffed;
  border: 2px solid #52c41a;
}

.resource-name {
  padding: 12px;
  cursor: grab;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.resource-name:active {
  cursor: grabbing;
}

.drag-handle {
  color: #999;
  font-size: 12px;
}

.name {
  font-weight: 500;
  flex: 1;
}

.level {
  color: #666;
  font-size: 12px;
}

.children {
  margin-left: 20px;
}
</style>
